import * as React from 'react';
import { Form, Input, DatePicker, Radio } from 'antd';
import { FormLayout } from 'antd/lib/form/Form';

interface IInputProps {
  type: string;
  name: string;
  label: string;
  validation?(data: string): void;
  items?: any[]
}

interface Props {
  form?: any,
  items: IInputProps[],
  data?: any;
  layout?: FormLayout;
}

const IForm: React.FC<Props> = ({ items, form, data, layout }: Props) => {
  data = data || {};
  return (
    <Form layout={layout}>
      {items.map((item: IInputProps) => {
        switch (item.type) {
          case "date":
            return <Form.Item key={item.name} label={item.label}>
              {form.getFieldDecorator('date-picker', {
                rules: item.validation(item.label),
                initialValue: data[item.name],
              })(<DatePicker />)}
            </Form.Item>
          case "rtext":
            return <>123213213</>
          case "string":
            return <Form.Item key={item.name} label={item.label}>
              {data[item.name]}
            </Form.Item>
          case "select":
            return <Form.Item key={item.name} label={item.label}>
              {form.getFieldDecorator(item.name, {
                initialValue: data[item.name],
                type: 'array'
              })(<Radio.Group>
                {item.items.map((item: any) => {
                  return <Radio.Button key={item.key} value={item.key}>{item.value}</Radio.Button>
                })}
              </Radio.Group>)}
            </Form.Item>
          default:
            return <Form.Item key={item.name} label={item.label}>
              {form.getFieldDecorator(item.name, {
                rules: item.validation(item.label),
                initialValue: data[item.name],
              })(
                <Input
                  placeholder={`请输入${item.label}`}
                  type={item.type}
                />
              )}
            </Form.Item>
        }

      })}
    </Form>
  );

}

export default IForm;